<template>
  <div class="va-container">
    <div class="flex-row ">
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('companyName')}">
        <input type="text" v-model="vipinfo.companyName" v-validate="'required|max:40'" name="companyName" required @blur="getEcInfo(vipinfo.companyName)"/>
        <label data-content="单位名称*"></label>
      </div>
      <div class="material-textfield green form-right" :class="{'validate-err': errors.has('organizationCode')}">
        <input type="text" required v-model="vipinfo.organizationCode" v-validate="'required|max:40'" name="organizationCode"/>
        <label data-content="组织机构代码*"></label>
      </div>
    </div>
    <div class="flex-row ">
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('companyNature')}">
        <el-select v-model="vipinfo.companyNature" placeholder="" class="width-full" v-validate="'required'" name="companyNature">
          <el-option
            v-for="item in optionsNature"
            :filterable="true"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <label data-content="单位性质*"></label>
      </div>
      <div class="material-textfield green form-right" :class="{'validate-err': errors.has('grade')}">
        <el-select v-model="vipinfo.grade" placeholder="" class="width-full" v-validate="'required'" name="grade">
          <el-option
            v-for="item in optionsGrade"
            :filterable="true"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <label data-content="测绘资质*"></label>
      </div>
    </div>
    <div class="flex-row">
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('cityName')}">
        <city-cascader v-model="vipinfo.cityName"
        v-validate="'required|city'" name="cityName"
        :provinceCode.sync="vipinfo.provinceCode"
        :cityCode.sync="vipinfo.cityCode"
        :areaCode.sync="vipinfo.areaCode"
        ></city-cascader>
        <label data-content="省\市\区县*"></label>
      </div>
      <div class="material-textfield green form-right" :class="{'validate-err': errors.has('companyAddress')}">
          <input type="text" required v-model="vipinfo.companyAddress" v-validate="'required|max:80'" name="companyAddress"/>
          <label data-content="单位详细地址*"></label>
      </div>
    </div>

    <div class="flex-row ">
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('companyPost')}">
        <input type="text" required v-model="vipinfo.companyPost" v-validate="'required|zipCode'" name="companyPost"/>
        <label data-content="邮编*"></label>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
  export default {
    title: '会员单位基本信息',
    name: 'vipunit-info',
    data () {
      return {
        vipinfo: {},
        value: '',
          optionsNature: [{
            value: 'GYQY',
            label: '国有企业'
          }, {
            value: 'WZQY',
            label: '外资企业'
          }, {
            value: 'HZQY',
            label: '合资企业'
          }, {
            value: 'SYQY',
            label: '私营企业'
          }, {
            value: 'SYDW',
            label: '事业单位'
          }, {
            value: 'GJXZJG',
            label: '国家行政机关'
          }, {
            value: 'SHZZ',
            label: '社会组织'
          }, {
            value: 'XX',
            label: '学校'
          }, {
            value: 'QT',
            label: '其它'
          }
        ],
        optionsGrade: [{
            value: 'N',
            label: '非资质单位'
          },{
            value: 'A',
            label: '甲级'
          },{
            value: 'B',
            label: '乙级'
          },{
            value: 'C',
            label: '丙级'
          },{
            value: 'D',
            label: '丁级'
          }
        ],
        // province: [], // 省
        // city: [], //市
        // area: [],
      }
    },
    props: {
      data: {}
    },
    mounted () {
      this.vipinfo = Object.assign({}, this.data)
      if (this.vipinfo.companyName) {
        this.getEcInfo(this.vipinfo.companyName)
      }
      // this.getProvince()
    },
    methods: {
      validate () {
        return this.$validator.validateAll()
      },
      // 验证企业是否已经注册过了
      getEcInfo (name) {
        axios.post('/mscs/member/findMemberByCompanyName', this.$paramsConvert({companyName: name})).then(res => {
          if (res.data.code === 1) {
            this.$emit('vali-reec', res.data.data)
          } else {
            this.$codeError(res)
          }
        }).catch(error => {
          this.$catchError(error)
        })
      }

    },
    watch: {
      'vipinfo': {
        handler: function (val, oldVal) {
          this.$emit('update:data', this.vipinfo)
        },
        deep: true
      }
    }
  }
</script>
